<template>
  <div>
    <div class="block">
      <span class="demonstration">模型功能选择： </span>
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"
      ></el-cascader>
    </div>

    <div v-if="selectedModel">
      <h3>模型详细信息</h3>
      <p>模型名称: {{ selectedModel.label }}</p>
      <p>模型数值: {{ selectedModel.value }}</p>
      <p>模型描述: {{ selectedModel.description }}</p>
      <p>参数量: {{ selectedModel.parameters }}</p>
      <p>计算量: {{ selectedModel.computation }}</p>
      <el-switch
        v-model="selectedModel.usePretrained"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="使用预训练模型"
        inactive-text="不使用预训练模型"
      ></el-switch>
      <div v-if="selectedModel.usePretrained" class="button-row">
        <el-upload
            class="upload-demo"
            action="string"

            :show-file-list="false"
            accept=".pth,.h5"
          >
            <el-button plain size="medium" type="primary" @click="uploadModel"
              ><i class="el-icon-upload icon-item"></i>上传文件</el-button
            >
          </el-upload>
      </div>
      <div class="button-row">
        <el-button type="primary" @click="saveResult">保存</el-button>
      </div>
    </div>

    <div v-else>
      <p>没有找到您使用的模型</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ModelManage",
  data() {
    return {
      value: [],
      options: [
        {
          value: "bingzaofenge",
          label: "器官分割",
          children: [
            {
              value: "nnunet1",
              label: "nnUNet Model",
              description: "这是nnUNet模型用于器官分割",
              parameters: "34.9M",
              computation: "302.3G",
              usePretrained: false,
            },
            { value: "nnformer1", label: "nnFormer Model", description: "这是nnFormer模型用于器官分割",parameters: "149.6M",computation: "421.5G", usePretrained: false,},
            { value: "jiaohu1", label: "GE-UNET Model", description: "这是GE-UNET模型用于器官分割" ,parameters: "13.36M",computation: "50.17G", usePretrained: false,},
          ],
        },
        {
          value: "qiguanfenge",
          label: "病灶分割",
          children: [
            { value: "nnunet2", label: "nnUNet Model", description: "这是nnUNet模型用于病灶分割", parameters: "1.32M", computation: "109.75G"},
            { value: "nnformer2", label: "nnFormer Model", description: "这是nnFormer模型用于病灶分割" , parameters: "122.16 M", computation: "309.75G"},
            { value: "jiaohu2", label: "GE-UNET Model", description: "这是GE-UNET模型用于病灶分割", parameters: "12.14M", computation: "24.21G" },
          ],
        },
        {
          value: "fenge",
          label: "肿瘤检测",
          children: [
            { value: "yolo", label: "yolov8 Model", description: "这是yolov8模型用于肿瘤检测" , parameters: "32.12M", computation: "121.15G"},
            { value: "RetinaNet", label: "RetinaNet", description: "这是RetinaNet模型用于肿瘤检测" , parameters: "100.53M", computation: "321.15G"},
            { value: "EfficientDet", label: "EfficientDet", description: "这是EfficientDet模型用于肿瘤检测" , parameters: "185.43M", computation: "344.08G"},
          ],
        },
      ],

      selectedModel: null,
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
      const [group, model] = value;
      const groupIndex = this.options.findIndex((item) => item.value === group);
      const modelIndex = this.options[groupIndex].children.findIndex(
        (item) => item.value === model
      );
      if (groupIndex !== -1 && modelIndex !== -1) {
        this.selectedModel = this.options[groupIndex].children[modelIndex];
      } else {
        this.selectedModel = null;
      }
    },
    handleUploadSuccess(response) {
      const { filename } = response;
      // 处理模型上传成功的回调
      console.log("模型上传成功", filename);
      // 将上传成功的模型添加到选项中
      const newModel = {
        value: filename,
        label: "自定义模型",
        description: "这是您自己上传的模型",
        parameters: "100万",
        computation: "500万次",
        usePretrained: false,
      };
      const groupIndex = this.options.findIndex(
        (group) => group.value === "custom"
      );
      if (groupIndex !== -1) {
        this.options[groupIndex].children.push(newModel);
      } else {
        this.options.push({
          value: "custom",
          label: "自定义模型",
          children: [newModel],
        });
      }
      // 选中自定义模型
      this.value = ["custom", filename];
      this.selectedModel = newModel;
    },
    validateUpload(file) {
          // Check if the uploaded file has the desired format (e.g., .h5, .pth, etc.)
          const allowedFormats = [".h5", ".pth"];
          const fileName = file.name.toLowerCase();
          const isAllowed = allowedFormats.some(format => fileName.endsWith(format));

          if (!isAllowed) {
            this.$message.error("只支持上传 .h5 或 .pth 格式的权重文件！");
            return false;
          }

          return true;
        },
    saveResult() {
      const result = {
        model: this.selectedModel.label,
        parameters: this.selectedModel.parameters,
        computation: this.selectedModel.computation,
        usePretrained: this.selectedModel.usePretrained,
      };
      this.$message.success("保存成功!");

      // 将结果保存到后端或进行其他处理
      console.log("保存结果", result);
    },
  },
};
</script>

<style scoped>
.block {
  margin: 20px 0;
}

.demonstration {
  font-weight: bold;
}

h3 {
  margin-top: 20px;
}

p {
  margin-bottom: 10px;
}

.button-row {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.upload-custom {
  margin-top: 20px;
}
</style>
